<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/rp/common/taglib.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script src="rp/scripts/boot.js" type="text/javascript"></script>
	
	<style type="text/css">
	   	
    </style>
	
  </head>
  
  <body class="body-fit">
  	
  	<div style="width:100%;">
        <div class="mini-toolbar" style="padding:1px;border-top:0;border-left:0;border-right:0;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" onclick="addRow()"><i class="fa fa-plus fa-lg"></i> 新增</a>
                        <a class="mini-button" onclick="saveRows()"><i class="fa fa-floppy-o fa-lg"></i> 保存</a>
                        <a class="mini-button mini-button-danger" onclick="removeRows()"><i class="fa fa-trash-o fa-lg"></i> 删除</a>
                        
                    </td>
                    <td style="white-space:nowrap;">
                    	<!-- <a class="mini-button" onclick="search()"><i class="fa fa-search fa-lg"></i> 查询</a> -->
                    </td>
                </tr>
            </table>           
        </div>
    </div>
  	<div class="mini-fit">
	  	<div id="panelGrid" class="mini-datagrid" 
	  		style="width: 100%; height: 100%;" borderStyle="border:0;"
	    	url="rp/system/panelMng/getPanelsByPage" idField="id" allowResize="false" pageSize="20"
	    	allowCellEdit="true" allowCellSelect="true" multiSelect="true" 
	        editNextOnEnterKey="true" editNextRowCell="true" allowCellValid="true" showFilterRow="false">
		    <div property="columns">
		        <div type="indexcolumn" headerAlign="center">序号</div>
		        <div type="checkcolumn"></div>
		        <div name="panelClass" field="panelClass" width="100" headerAlign="center" autoShowPopup="true">
		        	样式类名
		        	<input property="editor" 
		        		class="mini-combobox" style="width:100%;"
		        		valueField="text" textField="text"
		        		data="[{text:'panel-default'},{text:'panel-primary'},{text:'panel-success'},{text:'panel-info'},{text:'panel-warning'},{text:'panel-danger'}]"/>
		        </div>  
		        <div field="panelColClass" vtype="required" width="100" headerAlign="center" autoShowPopup="true">
		        	栅格类名
		        	<input property="editor" 
		        		class="mini-combobox" style="width:100%;"
		        		valueField="text" textField="text"
		        		data="[{id:'',text:'col-md-3'},{id:'',text:'col-md-6'},{id:'',text:'col-md-9'},{id:'',text:'col-md-12'}]"/>
		        </div>  
		        <div field="panelTitle" vtype="required" width="100" headerAlign="center">
		        	标题
		        	<input property="editor" class="mini-textbox" style="width:100%;"/>
		        </div> 
		        <div field="panelSrc" vtype="required" width="100" headerAlign="center">
		        	嵌入页面链接
		        	<input property="editor" class="mini-textbox" style="width:100%;"/>
		        </div> 
		        <div field="panelHeight" vtype="required" width="100" headerAlign="center">
		        	高度（PX）
		        	<input property="editor" 
		        		class="mini-combobox" style="width:100%;"
		        		valueField="text" textField="text" allowInput="true"
		        		data="[{text:'auto'}]"/>
		        </div> 
		        <div field="panelSort" vtype="required" width="100" headerAlign="center">
		        	排序
		        	<input property="editor" class="mini-textbox" style="width:100%;"/>
		        </div>
		        <div type="comboboxcolumn" autoShowPopup="true" 
		        	field="enabled2" vtype="required" width="40" align="center" headerAlign="center" renderer="onEnabledRenderer">
		        	激活状态
	                <input property="editor" class="mini-combobox" style="width:100%;" data="Activates" />                
	            </div>
		        <!-- <div name="" field="" width="60" headerAlign="center" renderer="onActionRenderer">
		        	操作
		        </div> -->
		        <div field="createDate" width="70" headerAlign="center" allowSort="true" renderer="onDateRenderer">
		        	创建日期
		        </div>                
		    </div>
		</div>
	</div>
  	
  	<script type="text/javascript">
		var grid;
		
		$(function(){
			mini.parse();
			grid = mini.get("panelGrid");
			grid.load();
		});
		
		function addRow() {
			var newRow = {
				panelClass : ""
			};
			grid.addRow(newRow, 0);
			grid.beginEditCell(newRow, "panelClass");
		}
		
		function saveRows() {
			grid.validate();
			if (grid.isValid() == false) {
				var error = grid.getCellErrors()[0];
				grid.beginEditCell(error.record, error.column);
				return;
			}

			var data = grid.getChanges();
			var json = rp_encode(data);
			grid.loading("保存中，请稍等......");
			rp_ajax("rp/system/panelMng/savePanels", {
				data : json
			}, function(result) {
				grid.reload();
			});
		}
		
		function removeRows() {
			var rows = grid.getSelecteds();
			if (rows.length == 0) {
				mini.alert("请勾选需要删除的记录...");
			} else {
				mini.confirm("确定删除记录吗？", "友情提示", function(action) {
					if (action == "ok") {
						var json = rp_encode(rows);
						if (rows.length > 0) {
							rp_ajax("rp/system/panelMng/deletePanels", {
								data : json
							}, function(result) {
								grid.reload();
							});
						}
					}
				});
			}
		}
	</script>
  </body>
</html>